<!--
 * @Author: your name
 * @Date: 2021-10-16 09:27:12
 * @LastEditTime: 2021-10-16 09:39:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /a1902-a-group/admin_pc/src/component/NewData.vue
-->
<template>
  <div>
    <span>校验数据的</span>

    <div>
        name: {{name}}
        age: {{age}}
    </div>
    <button @click="setUser">点击</button>
  </div>
</template>

<script>

const dataMixin = {
    created() {
        // console.log(this.$options.rules)
        for(let key in this.$options.rules) {
            const item = this.$options.rules[key]
            this.$watch(key, (value) => {
                const result = item.validata(value)
                if(!result) console.log(item.message)
            })
        }
    },
}

export default {
    mixins: [dataMixin],
    data() {
        return {
            name: 'zxd',
            age: 18
        }
    },
    // 自定义的属性
    rules: {
        age: {
            validata: (age) => age > 25,
            message: '你太年轻了'
        },
        name: {
            validata: (name) => name.length > 5,
            message: '你的名字太简单啦'
        }
    },
    methods: {
        setUser() {
            this.age += 1;
            this.name += 'b';
        }
    },
}
</script>

<style>

</style>